<!DOCTYPE html>
<html>
<head>
    <script src="jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="qr.js" type="text/javascript"></script>
    <script type="text/javascript">
        var qr_coder = null;
        $(document).ready(function(){
            qr_coder = new QRCoder($('#qr_container'));
            $('#qr_gen').click(function()
            {
                $('#qr_container').html("generating");

                var watch_start=new Date();
                qr_coder.setMode(1);
                qr_coder.draw(
                    $('#qr_link').val(),
                    $("[name='qr_capacity']:checked").val(),
                    'icon.png',
                    function(data)
                    {
                        var watch_end=new Date();
                        console.log("cost:"+(watch_end-watch_start)+"ms");

                    });
            });
        });
    </script>

</head>
<body>
<h1>QR CODER</h1>
<div style="margin:auto; position:relative; margin-left: 50%; left: -250px; width:500px;">
    <label for="qr_link">URL:</label>
    <input id="qr_link" type="text" value="http://you.ctrip.com" style="width:350px;" />
    <button id="qr_gen" value="Generate">Generate</button> <br />
    <div style="display:none">
        <input id="qr_capacity_l" name="qr_capacity" type="radio" value="L"/> <label for="qr_capacity_l">7%</label>
        <input id="qr_capacity_m" name="qr_capacity" type="radio" value="M"/> <label for="qr_capacity_m">15%</label>
        <input id="qr_capacity_q" name="qr_capacity" type="radio" value="Q"/> <label for="qr_capacity_q">25%</label>
        <input id="qr_capacity_h" name="qr_capacity" type="radio" value="H" checked/> <label for="qr_capacity_h">30%</label>
    </div>
</div>
<div id="qr_container" style="margin:auto; position:relative;"></div>
</body>
</html>